<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <el-aside width="200px">
    <el-menu
      :default-active="selected"
      class="el-menu-vertical-demo"
      text-color="#fff"
      background-color="#222832"
      router
    >
      <h3>商店后台管理系统</h3>
      <div class="my-menuList" v-for="(item, index) in menuList" :key="index">
        <el-menu-item
          :index="item.path"
          v-if="!item.children"
          :text="item.title"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
        <el-submenu v-else :index="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="(it, index) in item.children"
            :key="index"
            :index="it.path"
            :text="it.title"
          >
            <span slot="title">{{ it.title }}</span></el-menu-item
          >
        </el-submenu>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "myAsider",
  data() {
    return {
      selected: "",
      menuList: [
        {
          title: "首页",
          path: "/dashboard",
          icon: "el-icon-s-home",
        },
        {
          title: "用户管理",
          path: "/customers",
          icon: "el-icon-user",
        },
        {
          title: "商品管理",
          path: "/products",
          icon: "el-icon-goods",
          children: [
            {
              title: "商品列表",
              path: "/products",
            },
            {
              title: "新增商品",
              path: "/products/goodsDetail",
            },
          ],
        },
        {
          title: "订单管理",
          path: "/orders",
          icon: "el-icon-tickets",
        },
        {
          title: "配送范围",
          path: "/maparea",
          icon: "el-icon-location",
        },
      ],
    };
  },
  mounted() {
    let path = this.$route.path;
    this.selected = path;
  },
  methods: {
    ...mapMutations("communication", ["changeSelect", "changePageTextMu"]),
    //修改header的title
    // changePageText(e) {
    //   let text = e.$attrs.text
    //   this.changePageTextMu(text)
    // },
  },
};
</script>

<style>
</style>